<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Apache Hive 3.1 Page</title>
  <link href="data.css" rel="stylesheet">  
</head>
<body ng-app="myApp"> 
<div style="align: center; overflow:auto; height:300px; width:800px" class="white-frame" id="searchText">
<b>Operations Dashboard</b>
<br><br>

<form method="get" action="/index.html">
Query: <input type="text" id="query" name="query" value=""> <input type="submit" name="Go">
</form>
</div>

  <h1>Metrics</h1>

<div id="output" name="output" style="align: center; overflow:auto; height:400px; width:800px" class="white-frame">
  <ul id="metrics"></ul>  
</div>


<div id="promoNode"></div>
	
	<p>Check out the console to see changes in battery status!</p>
	
	<h2>Your Battery</h2><br />
	<div id="battery" style="border: 1px solid #000; width: 200px;">
		
		<div id="batteryLevel" style="min-height: 30px; font-size: 40px; text-align:center; color: #000; background: #ddd;"></div>
		
	</div><br />
	
	<p>
		<strong>Charging Status:</strong> <span id="chargingStatus"></span>
	</p>
	
</div>


<script language="javascript">

   var myList = document.querySelector('ul');

   var myRequest = new Request('./metrics/');

fetch(myRequest)
  .then(function(response) { return response.json(); })
  .then(function(data) {
    for (var i = 0; i < data.length; i++) {
      var listItem = document.createElement('li');
      listItem.innerHTML = '<strong>Timestamp' + data[i].timestamp + '</strong>  Flow Files Received: ' +
                           data[i].flowfilesreceivedlast5minutes + ' JVM Heap Usage:' + data[i].jvmheap_usage +
                           ' Threads Waiting:' + data[i].jvmthread_statestimed_waiting +
                           ' Thread Count: ' + data[i].jvmthread_count +
                           ' Total Task Duration: ' + data[i].totaltaskdurationnanoseconds +
                           ' Bytes Read Last 5 min: ' + data[i].bytesreadlast5minutes +
                           ' Flow Files Queued: ' + data[i].flowfilesqueued +
                           ' Bytes Queued: ' + data[i].bytesqueued;
                           
      myList.appendChild(listItem);
    }
  });
  
</script>
<script>
		// A few useful battery properties
		if(navigator.getBattery) {
			navigator.getBattery().then(function(battery) {

				console.warn("Battery charging: ", battery.charging);
				console.warn("Initial battery level: ", battery.level);

				var node = document.getElementById("batteryLevel");
				var change = function(e) {
					console.warn("Battery level change: ", battery.level);
					var perc = (battery.level * 100) + "%";
					node.style.width = perc;
					node.innerHTML = perc;
				};
				
				var chargeChange = function() {
					console.warn("Battery charge change: ", battery.charging);
					var chargeNode = document.getElementById("chargingStatus");
					chargeNode.innerHTML = "<span style='color:" + (battery.charging ? "green" : "red") + "'>" + (battery.charging ? "Charging" : "NOT Charging") + "</span>";
				};

				battery.addEventListener("chargingchange", chargeChange, false);
				battery.addEventListener("chargingtimechange", function(e) {
					console.warn("Battery charge time change: ", battery.chargingTime);
				}, false);
				battery.addEventListener("dischargingtimechange", function(e) {
					console.warn("Battery discharging time change: ", battery.dischargingTime);
				}, false);
				battery.addEventListener("levelchange", change, false);

				change();
				chargeChange();
				
			});
		}
		else {
			console.warn("Your browser does not have the navigator.mozBattery object");
		}
		
	</script>
<br><br>
<p>

    &copy; 2018


</body>
</html>